<template>
	<view class="page">
		<view class="head">
			<view class="job-vip-banner" :style="{ 'background-image': 'url(' + bannerImgUrl + ')' }">
				<view class="job-vip-banner-right">
					<view class="job-vip-banner-right-first">
						<u-icon name="/static/job/vip1.png" size="32rpx"></u-icon>
						<text>专享特权</text>
					</view>
					<view class="job-vip-bannerright-second">
						开通即可享受多项特权，助你招到好员工
					</view>
				</view>
				<view class="job-vip-banner-left">
					<view class="job-vip-banner-left-image" :style="{ 'background-image': 'url(/static/job/vip2.png)' }">
						
					</view>
					
				</view>
			</view>
			
			<!-- <view class="job-vip-notpurchased">
				您还没有开通VIP特权
			</view> -->
			
			<view class="job-vip-purchased">
				<view class="job-vip-purchased-content">
					【套餐四】发布365天，原价4500元，会员价999元；发布职位20个，赠送刷新1460次（每天4次）+查看简历50份+《供求信息》报纸黑白半通栏6期.支付后请联系为您服务的业务员或拨打客服电话:2222555
					<text>(9999天过期)</text>
				</view>
				<view class="job-vip-purchased-bottom">
					<view class="job-vip-purchased-item">
						<view class="job-vip-purchased-item-number">
							17<text>条</text>
						</view>
						<view class="job-vip-purchased-item-text">
							剩余职位数
						</view>
					</view>
					<view class="job-vip-purchased-item">
						<view class="job-vip-purchased-item-number">
							50<text>份</text>
						</view>
						<view class="job-vip-purchased-item-text">
							剩余简历数
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="job-vip-package" v-for="(item, index) in 10" :key="index">
				<view class="job-vip-package-content">
					【套餐四】发布365天，原价4500元，会员价999元；发布职位20个，赠送刷新1460次（每天4次）+查看简历50份+《供求信息》报纸黑白半通栏6期.支付后请联系为您服务的业务员或拨打客服电话:2222555
					<text> / 365</text>
				</view>
				<view class="job-vip-package-buy">
					<view class="job-vip-package-buy-price">
						<text>￥</text>9999.00
					</view>
					<view class="job-vip-package-buy-button">
						立即开通
					</view>
				</view>
				<view class="job-vip-package-function">
					<view class="job-vip-package-function-item">
						<u-icon name="/static/job/vip3.png" size="26rpx" label="发布职位20个" labelColor="#9c6e2e" labelSize="26rpx"></u-icon>
					</view>
					<view class="job-vip-package-function-item">
						<u-icon name="/static/job/vip4.png" size="26rpx" label="查看简历50份" labelColor="#9c6e2e" labelSize="26rpx"></u-icon>
					</view>
					<view class="job-vip-package-function-item">
						<u-icon name="/static/job/vip5.png" size="26rpx" label="刷新职位4次/天" labelColor="#9c6e2e" labelSize="26rpx"></u-icon>
					</view>
					<view class="job-vip-package-function-item">
						<u-icon name="/static/job/vip6.png" size="26rpx" label="已发布职位每天自动刷新一次" labelColor="#9c6e2e" labelSize="26rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			
		</view>
		<!-- 自定义底部导航菜单开始 -->
		<JobTabbar></JobTabbar>
		<!-- 自定义底部导航菜单结束 -->
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
import JobTabbar from '@/components/JobTabbar/JobTabbar.vue';
	export default {
		data() {
			return {
				bannerImgUrl: '/static/job/vipbanner.png'
			};
		},
		methods: {

		},
		components: {
			JobTabbar,
		}
	}
</script>

<style lang="scss" scoped>
@import url('jobMyBuyVip.css');
</style>
